import styled from 'styled-components'
export const CategoryStyle = styled.div`
.category-box {
  margin-bottom: env(safe-area-inset-bottom);
  .left{
    background-color: white;
    width: 2.89rem;
  
    .item{
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      /* border: dashed #ff7688 1px; */
      width: 100%;
      height: 1.17rem;
      .text{
        line-height: 1;
        font-size: .4rem;
        height: .37rem;
        width: 100%;
        font-weight: bold;
      }
    }
  }

  .right{
    /* width: 6.63rem */
    height: 100vh;
    margin-right: .32rem;
    .box{
      margin-top: .16rem;
      width: 6.63rem;
      background-color: white;
      border-radius: .15rem;
      box-sizing: border-box;
      padding: .16rem .16rem;

      .alphabet{
        text-align: right;
        font-size: .4rem;
        font-weight: bold;

      }
      .content{
        /* flex-wrap: nowrap; */
        .item{
          margin-bottom: .16rem;
          /* width: 1.79rem; */
          padding: 0 .2rem;
          height: .8rem;
          border: solid 1px rgba(71, 71, 71 , .2);
          border-radius: .15rem;
          display: flex;
          justify-content: center;
          align-items: center;
          .text{
            font-weight: bold;
          }
        }
      }
      

    }
  }
}

`